import { Panel, TeamSelect, ImgHolder } from 'comps/common';
import { Table, Button, Icon, Popconfirm, Form } from 'antd';

const FormItem = Form.Item;

let TeamAuthForm = ({ style, form, submiting, onAuthDevTeam }) => {
  const { getFieldProps, getFieldValue } = form;
  const onSubmit = (evt) => {
    evt.preventDefault();
    const teamId = getFieldValue('teamId');
    if (teamId !== undefined && teamId !== '') {
      onAuthDevTeam(teamId);
    }
  };

  return (
    <Form inline style={style} form={form} onSubmit={onSubmit}>
      <FormItem>
        <TeamSelect {...getFieldProps('teamId')} style={{ width: '200px' }}/>
      </FormItem>
      <Button loading={submiting} type='primary' htmlType='submit'>添加授权</Button>
    </Form>
  );
};
TeamAuthForm = Form.create()(TeamAuthForm);

const AuthDevTeams = ({ fetching, devTeams, authFetching, onAuthDevTeam, onUnAuthDevTeam }) => {
  const columns = [
    { title: 'ID', key: 'id', dataIndex: 'id' },
    {
      title: 'Logo', key: 'logo', dataIndex: 'logo', render: (logo, record) => {
        return <ImgHolder src={logo} alt={record.name} style={{ width: '40px', height: '40px' }} rect='40x40' random='yes' text={record.name.substring(0, 1)}/>;
      }
    },
    { title: '名称', key: 'name', dataIndex: 'name' },
    {
      title: '', key: 'operator', render: (t, record) => {
        return (
          <Popconfirm title='确定解除授权吗？也会一并从正在负责的开发组中移除，需要重新设置开发组负责团队'
            onConfirm={() => onUnAuthDevTeam(record.id)}
          >
            <Button><Icon type='minus'/>解除授权</Button>
          </Popconfirm>
        );
      }
    }
  ];

  return (
    <Panel spinner={fetching}>
      <TeamAuthForm style={{ marginBottom: '20px' }} submiting={authFetching} onAuthDevTeam={onAuthDevTeam}/>
      <Table columns={columns} dataSource={devTeams} pagination={false} rowKey={record => record.id}/>
    </Panel>
  );
};

export default AuthDevTeams;
